<?php
/**
 * Created by PhpStorm.
 * User: zhanglu
 * Date: 2019/2/19
 * Time: 1:19 PM
 */
$per_url = Yii::$app->params['imgurl'];
$this->registerCssFile('@web/css/dropload.css');
$this->registerCss("
    body{
       padding:0px;
       margin:0px;
       background:#f1f1f8;
    }
    #input{
        border-radius:6px 0px 0px 6px !important;
        border:1px solid #333;
        color:#333;
        background:#fff;
        font-size:14px;
    }
    .mui-toast-container
    {
        line-height: 17px;
        position: fixed;
        z-index: 9999;
        top: 50%;
        left: 50%;
        -webkit-transition: opacity .3s;
                transition: opacity .3s;
        -webkit-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
        opacity: 0;
    }
    .mymark{background: #f1f1f8;padding: 2px 10px;font-size:12px;color:#333;margin-right: 6px;border-radius: 6px;box-shadow: 0 0 6px #333}
    .action{display: flex;align-items: center;margin-top: 15px}
    .action img{width:20px}
    .action span{font-size: 12px;color:#fff;margin-left:10px}
    .search{margin: 60px 15px 15px 15px;display: flex;}
    #mybutton{width:100%;height: 40px;border:0px;background: #333;color:#fff;border-radius: 0px 0px 20px 0px}
    .search-body{margin: 15px 15px 15px 30px;}
    .book-list a{text-decoration: none;}
    .book-item{margin-top:30px;width:100%;height:120px;background: #333;color:#fff;position: relative;border-radius: 6px 6px 20px 6px;box-shadow: 0 0 6px #333}
    .book-item .thumb{position: absolute;top:-15px;left:-15px;width:80px;height:120px;background: #fff;box-shadow: 0 0 6px #fff;border-radius: 6px;}
    .book-item .cont{padding: 15px 15px 15px 100px;}
    .book-item .cont .title{color:#f1f1f8;font-size: 16px;}
    .book-list ul{padding: 0px;margin: 0px}
    .book-list ul li{list-style: none;float:left;margin-top:20px;margin-right:10px}
    .book-list ul li span{padding:4px 12px;border:1px solid #333;color:#333;border-radius:12px;font-size:12px;}
");
$this->title = '搜索';
?>

<div class="page-book-search">
    <header id="myheader" class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #333;"></a>
        <a href="#menu" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right" style="color: #333;"></a>
        <h1 class="mui-title"><?=$this->title?></h1>
    </header>
    
    <div class="search">
        <div style="flex: 4;">
            <input id="input" type="text" placeholder="搜索 关键字" value="<?=$search?>">
        </div>
        <div style="flex: 1;">
            <button id="mybutton">搜索</button>
        </div>
    </div>

    <div class="search-body" style="margin-bottom: 60px">
        <div class="book-list">
            <?php if($list){ ?>
                <?php foreach($list as $k=>$v){ ?>
                    <a href="/touch/default/book-item?id=<?=$v['number']?>">
                        <div class="book-item wow slideInRight" data-wow-duration="0.5s">
                            <div class="thumb" style='background: url(<?=$per_url . $v['thumb_img']?>) no-repeat center;background-size: cover;'>
                            </div>
                            <div class="cont">
                                <p class="title"><?=$v['front_title']?></p>
                                <p>
                                    <?php if($v['is_over'] == 1){ ?>
                                        <span class="mymark">完结</span>
                                    <?php }else{ ?>
                                        <span class="mymark">更新中</span>
                                    <?php }?>
                                    <?php if($v['is_recommend'] == 1){?>
                                        <span class="mymark">推荐</span>
                                    <?php }?>
                                    <?php if($v['is_hot'] == 1){?>
                                        <span class="mymark">热门</span>
                                    <?php }?>
                                </p>
                                <div class="action">
                                    <div style="flex: 1;">
                                        <img src="/img/icon-like.png" alt=""><span> <?=$v['zan_num']?></span>
                                    </div>
                                    <div style="flex: 1;text-align: right;">
                                        <img src="/img/icon-view.png" alt=""><span> <?=$v['click_num']?></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                <?php }?>
            <?php }else{ ?>
                <?php if($searchlist){ ?>
                    <ul style="padding: 0px;margin: 0px">
                        <?php foreach($searchlist as $v){ ?>
                            <a href="/book-item/<?=$v['number']?>.html"><li><span><?=$v['front_title']?></span></li></a>
                        <?php }?>
                    </ul>
                    <div class="clearfix"></div>
                <?php }else{ ?>
                    <p style="text-align: center;">很遗憾，查询不到</p>
                <?php }?>
            <?php }?>
        </div>
    </div>

</div>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="/js/dropload.min.js"></script>
<script>

    $('#mybutton').click(function(){
        var val = $('#input').val();
        val = val.replace(/ /g,'')
        if(!val){
            window.location.href = '/touch/default/search';
        }
        if(val.length > 10){
            mui.alert('搜索内容长度过长', '警告', function() {
            });return;
        }
        window.location.href = '/touch/default/search?search='+val;
    });



</script>

